﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    ViewData["Title"] = "TodoList";

}
@using FirstDemo.Models
@model FirstDemo.Models.TodoGenreViewModel

<script src="~/lib/jquery/dist/jquery.min.js"></script>
@{
    //使用引入的方式通过context进行数据获取
    var todoList = Model.todoItems;
    TodoListContext context = new TodoListContext();
    var todoListCom = (context.TodoItems.Where(q => q.IsComplete == true)).ToList();
    var todoListUnCom = (context.TodoItems.Where(q => q.IsComplete == false)).ToList();
}
<script>
    $(document).ready(function () {
        $('#mySlide').on('slide.bs.carousel', function (e) {
            console.log(e.to);
            switch (e.to) {
                case 1: $('#all,#finish').hide(); $('#none').show(); break;
                case 2: $('#all,#none').hide();$('#finish').show(); break;
                case 0: window.location.href = '/TodoView/Index'; break;
            }
        });
    });

    //通过调用API的方式进行增加一个代办任务
    function submit(event) {
        var str = document.getElementById("show");
        if (event.keyCode == 13) {
            $.post("https://localhost:44331/api/TodoItems", {
                value: str.value
            }, function (data, status) {
                    if (status == "success") {
                        window.location.reload();
                    }
            })
        }
    }
    function showInput() {
        var value = document.getElementById("show").style.display;
        if (value == "none")
            document.getElementById("show").style.display = "block";
        else
            document.getElementById("show").style.display = "none";
    }
</script>

<div class="vw-100 vh-100 d-flex flex-column" style="background-image: linear-gradient(60deg,#96deda 0%,#50c9c3 100%);">
    <h2 class="text-white m-5">My TodoList @ViewData["test"]</h2>
    <div style="height:100px;"></div>
    <div class="vw-100 d-flex flex-column align-items-center">
        <div>
            <div id="mySlide" style="text-align: center;width: 250px;" class="carousel slide" data-interval="false">
                <div class="carousel-inner text-white">
                    <div class="carousel-item active">
                        全部任务清单
                    </div>
                    <div class="carousel-item">
                        未完成清单
                    </div>
                    <div class="carousel-item">
                        已完成清单
                    </div>
                </div>
                <a class="carousel-control-prev" href="#mySlide" role="button" data-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="carousel-control-next" href="#mySlide" role="button" data-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
            @*@foreach (var temp in ViewData["todoItems"] as List<TodoItem>)  通过ViewData进行数据获取 *@
            @*@foreach (var temp in Model.todoItems)    通过viewmodel进行数据获取*@

            <div id="all" style="display:block;">
                @foreach (var temp in todoList)
                {
                    <div class="dropdown m-2  rounded-lg">
                        <button class="btn bg-white text-secondary" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            @temp.Name
                            @if (temp.IsComplete == true)
                            {
                                <svg class="bi bi-check text-success" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd" d="M10.97 4.97a.75.75 0 0 1 1.071 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.236.236 0 0 1 .02-.022z" />
                                </svg>
                            }
                            <svg class="bi bi-three-dots ml-3" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z" />
                            </svg>
                        </button>
                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                            <a class="dropdown-item" asp-controller="TodoList" asp-action="Update" asp-route-id="@temp.Id">COMPLETE</a>
                            <a class="dropdown-item" asp-controller="TodoList" asp-action="Delete" asp-route-id="@temp.Id">DELETE</a>
                        </div>
                    </div>
                }
            </div>
            <div id="finish" style="display:none;">
                @foreach (var temp in todoListCom)
                {
                    <div class="dropdown m-2  rounded-lg">
                        <button class="btn bg-white text-secondary" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            @temp.Name
                            @if (temp.IsComplete == true)
                            {
                                <svg class="bi bi-check text-success" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd" d="M10.97 4.97a.75.75 0 0 1 1.071 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.236.236 0 0 1 .02-.022z" />
                                </svg>
                            }
                            <svg class="bi bi-three-dots ml-3" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z" />
                            </svg>
                        </button>
                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                            <a class="dropdown-item" asp-controller="TodoList" asp-action="Update" asp-route-id="@temp.Id">COMPLETE</a>
                            <a class="dropdown-item" asp-controller="TodoList" asp-action="Delete" asp-route-id="@temp.Id">DELETE</a>
                        </div>
                    </div>
                }
            </div>
            <div id="none" style="display:none;">
                @foreach (var temp in todoListUnCom)
                {
                    <div class="dropdown m-2  rounded-lg">
                        <button class="btn bg-white text-secondary" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            @temp.Name
                            @if (temp.IsComplete == true)
                            {
                                <svg class="bi bi-check text-success" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd" d="M10.97 4.97a.75.75 0 0 1 1.071 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.236.236 0 0 1 .02-.022z" />
                                </svg>
                            }
                            <svg class="bi bi-three-dots ml-3" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z" />
                            </svg>
                        </button>
                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                            <a class="dropdown-item" asp-controller="TodoList" asp-action="Update" asp-route-id="@temp.Id">COMPLETE</a>
                            <a class="dropdown-item" asp-controller="TodoList" asp-action="Delete" asp-route-id="@temp.Id">DELETE</a>
                        </div>
                    </div>
                }
            </div>

            <div class="m-2 rounded-lg">
                <input asp-action="Post" id="show" type="text" class="form-control" placeholder="输入任务名称" style="display: none;" onkeypress="submit(event)" />
            </div>
            <button class="btn text-white" onclick="showInput()">
                <svg class="bi bi-plus-square-fill mr-2" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4a.5.5 0 0 0-1 0v3.5H4a.5.5 0 0 0 0 1h3.5V12a.5.5 0 0 0 1 0V8.5H12a.5.5 0 0 0 0-1H8.5V4z" />
                </svg>
                新增任务
            </button>
        </div>
    </div>
</div>

